const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const {
	CleanWebpackPlugin
} = require("clean-webpack-plugin");
const webpack = require("webpack");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
	mode: "development",
	entry: {
		app: "./src/index.js",
	},
	devtool: "inline-source-map",
	devServer: {
		hot: true,
		static: path.join(__dirname, "dist"), //对外提供的访问内容的路径
		compress: true, //是否启用gzip压缩
		port: 9000, //提供访问的端口
		proxy: {
			'/api': 'http://localhost:3000'
		}
	},
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "bundle.js",
		clean: true, // 在生成文件之前清空 output 目录
	},
	module: {
		rules: [{
				test: /\.css$/i,
				use: [
					//'style-loader', 'css-loader'
					MiniCssExtractPlugin.loader, 'css-loader'
				]
			},
			{
				test: /\.(jpe?g|png|svg|gif)/i,
				// type: 'asset',
				type: 'asset/resource',
				generator: {
					filename: 'images/[name][ext][query]' // 局部指定输出位置
				},
				// parser: {
				// 	dataUrlCondition: {
				// 		maxSize: 8 * 1024 // 限制于 8kb
				// 	}
				// }
			}
		]
	},
	resolve: {
		alias: {
			'@': path.resolve(__dirname, './src'),
			// 下面可以继续新增别名
		}
	},
	plugins: [
		// new CleanWebpackPlugin(),// 在output中配置	clean: true后就不需要此配置
		new MiniCssExtractPlugin(),
		new HtmlWebpackPlugin({
			filename: "index.html",
			template: "index.html", //本地自定义模板
			title: "zmap",
		}),
		// webpack.ProvidePlugin是webpack的内部插件（不需要安装）提供全局的变量，在模块中使用无需用require引入;
		// 把node_modules中的jquery模块暴露给全局，
		// 这样就在功能模块中不需要写 import $ from 'jquery' 的情况就可以使用 $ 变量
		new webpack.ProvidePlugin({
			$: "jquery",
		}),
		// 拷贝静态资源文件到dist目录
		new CopyPlugin({
			patterns: [{
				from: "src/config.js",
				to: ""
			}],
		}),
		// new BundleAnalyzerPlugin()
	],
	externals: {
		//不打包jquery文件,通过cdn引用
		jquery: 'jQuery'
	}
};